<template>
  <div class="page">

    <!-- 医院成交情况、到店率异常 开始 -->
    <div class="row_box">
      <div class="row_left">
        <div class="head">
          <span class="name">医院成交情况</span>
          <div class="filter_box">
            <el-select size="mini" v-model="dealForm.dealAmountType" class="a_select" @change="getHospitalDeal">
              <el-option v-for="(item,index) in DEALPROJECTLIST" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
            <el-date-picker v-model="dealForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getHospitalDeal">
            </el-date-picker>
            <el-select size="mini" v-model="dealForm.city" filterable class="a_select" @change="e => changeDealHospital(e,'dealHospitalList')">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <el-select size="mini" v-model="dealForm.hospital" class="a_select" @change="getHospitalDeal">
              <el-option v-for="(item,index) in dealHospitalList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="hospitalDealChart"></div>
        </div>
        <!-- 图表区域 end -->

      </div>
      <div class="row_right">
        
        <div class="head">
          <span class="name">医院预约情况</span>
          <div class="filter_box">
            <el-date-picker v-model="bookForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getAppoint">
            </el-date-picker>
            <el-select size="mini" v-model="bookForm.city" filterable class="a_select" @change="e => changeBookHospital(e,'bookHospitalList')">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <el-select size="mini" v-model="bookForm.hospital" class="a_select" @change="getAppoint">
              <el-option v-for="(item,index) in bookHospitalList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="hospitalBookChart"></div>
        </div>
        <!-- 图表区域 end -->
      </div>
    </div>
    <!-- 医院成交情况、到店率异常 开始 -->

    <!-- 医院转化率情况、到店产值异常 开始 -->
    <div class="row_box">
      <div class="row_left">
        <div class="head">
          <span class="name">医院转化率情况</span>
          <div class="filter_box">
            <el-date-picker v-model="rateForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getConversionRate">
            </el-date-picker>
            <el-select size="mini" v-model="rateForm.city" filterable class="a_select" @change="e => changeRateHospital(e,'rateHospitalList')">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <el-select size="mini" v-model="rateForm.hospital" class="a_select" @change="getConversionRate">
              <el-option v-for="(item,index) in rateHospitalList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="hospitalRateChart"></div>
        </div>
        <!-- 图表区域 end -->

      </div>
      <div class="row_right">
        <div class="head">
          <span class="name">每个到店客户平均产值</span>
          <div class="filter_box">
            <el-date-picker v-model="averageForm.month" size="mini" type="month" placeholder="选择月" class="a_input" value-format="yyyy-MM" @change="getAverage">
            </el-date-picker>
            <el-select size="mini" v-model="averageForm.city" filterable class="a_select" @change="e => changeAverageHospital(e,'averageHospitalList')">
              <el-option v-for="(item,index) in cityList" :key="index" :label="item.name" :value="item.code"></el-option>
            </el-select>
            <el-select size="mini" v-model="averageForm.hospital" class="a_select" @change="getAverage">
              <el-option v-for="(item,index) in averageHospitalList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>

        <!-- 图表区域 开始 -->
        <div class="chart_box">
          <div class="chart" id="hospitalAverageFormChart"></div>
        </div>
        <!-- 图表区域 end -->
        
      </div>
    </div>
    <!-- 医院转化率情况、到店产值异常 开始 -->

    <div class="pie_list">

      <!-- 到店率异常 开始 -->
        <div class="pie_box">
          <div class="head">
              <span class="name">到店率异常</span>
              <el-date-picker class="data_picker" v-model="arriveTime" type="daterange" range-separator="~" start-placeholder="开始" end-placeholder="结束" size="mini" value-format="yyyy-MM-dd" @change="getArriveRate()">
              </el-date-picker>
            </div>
            <div class="pie_chart table_box">
              <el-table class="el_table" :data="arriveList" size="mini">
                <el-table-column label="序号" type="index"></el-table-column>
                <el-table-column label="医院名称" prop="hospitalName" show-overflow-tooltip></el-table-column>
                <el-table-column label="预约数" prop="appointmentCnt" show-overflow-tooltip>
                  <template slot-scope="{row}">{{row.appointmentCnt||0}}</template>
                </el-table-column>
                <el-table-column label="到店率" prop="appointmentArrivedRate" show-overflow-tooltip>
                  <template slot-scope="{row}">{{row.appointmentArrivedRate?Number(row.appointmentArrivedRate).toFixed(0):0}}%</template>
                </el-table-column>
              </el-table>
              <div class="page_pagination">
                <el-pagination background layout="prev, pager, next" hide-on-single-page small :page-size="pageSize" :current-page.sync="arrivePageNumber" @current-change="getArriveRate" :total="arriveTotal" :pager-count="7">
                </el-pagination>
              </div>
            </div>

        </div>
        <!-- 到店率异常 end -->

        <!-- 主诉成交异常 开始 -->
        <div class="pie_box">
          <div class="head">
          <span class="name">主诉成交异常</span>
          <el-date-picker class="data_picker" v-model="dealTime" type="daterange" range-separator="~" start-placeholder="开始" end-placeholder="结束" size="mini" value-format="yyyy-MM-dd" @change="getDealAnomaly()">
          </el-date-picker>
        </div>
        <div class="pie_chart table_box">
          <el-table class="el_table" :data="dealList" size="mini">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="医院名称" prop="hospitalName" show-overflow-tooltip></el-table-column>
            <el-table-column label="主诉人数" prop="mainDemandsArrivedCnt" show-overflow-tooltip>
              <template slot-scope="{row}">{{row.mainDemandsArrivedCnt||0}}</template>
            </el-table-column>
            <el-table-column label="主诉转化" prop="mainDemandsDealRate" show-overflow-tooltip>
              <template slot-scope="{row}">{{row.mainDemandsDealRate?Number(row.mainDemandsDealRate).toFixed(0):0}}%</template>
            </el-table-column>
          </el-table>
          <div class="page_pagination">
            <el-pagination background layout="prev, pager, next" hide-on-single-page small :page-size="pageSize" :current-page.sync="dealPageNumber" @current-change="getDealAnomaly" :total="dealTotal" :pager-count="7">
            </el-pagination>
          </div>
        </div>
        </div>
        <!-- 主诉成交异常 end -->

        <!-- 到店产值异常 开始 -->
        <div class="pie_box">
          <div class="head">
          <span class="name">到店产值异常</span>
          <el-date-picker class="data_picker" v-model="outValueTime" type="daterange" range-separator="~" start-placeholder="开始" end-placeholder="结束" size="mini" value-format="yyyy-MM-dd" @change="getOutValue()">
          </el-date-picker>
        </div>
        <div class="pie_chart table_box">
          <el-table class="el_table" :data="outValueList" size="mini">
            <el-table-column label="序号" type="index"></el-table-column>
            <el-table-column label="医院名称" prop="hospitalName" show-overflow-tooltip></el-table-column>
            <el-table-column label="到店客户数" prop="arrivedCnt" show-overflow-tooltip>
              <template slot-scope="{row}">{{row.arrivedCnt||0}}</template>
            </el-table-column>
            <el-table-column label="平均产值" prop="averageOutValue" show-overflow-tooltip>
              <template slot-scope="{row}">{{row.averageOutValue||0}}</template>
            </el-table-column>
          </el-table>
          <div class="page_pagination">
            <el-pagination background layout="prev, pager, next" hide-on-single-page small :page-size="pageSize" :current-page.sync="outValuePageNumber" @current-change="getOutValue" :total="outValueTotal" :pager-count="7">
            </el-pagination>
          </div>
        </div>
        </div>
        <!-- 到店产值异常 end -->

        <!-- 客户投诉 开始 -->
        <div class="pie_box">
          <div class="head">
          <span class="name">客户投诉</span>
          <a href="javascript:void(0)" class="a_more" @click="lookDetail">查看投诉详情<i class="el-icon-arrow-right"></i></a>
        </div>
        <div class="pie_chart complain_box">
          <div class="cell" v-for="(item,index) in complainList" :key="index">
            <div class="title">
              <span class="txt">投诉医院：{{item.hospitalName}}</span>
              <span class="time">{{item.complaintTime}}</span>
            </div>
            <div class="txt_box" :title="`投诉内容：${item.complaintContent}`">投诉内容：{{item.complaintContent&&item.complaintContent.length>20?item.complaintContent.slice(0,20) + '...':item.complaintContent}}</div>
          </div>
        </div>
        </div>
        <!-- 客户投诉 end -->
    </div>

  </div>
</template>
<script>
import * as echarts from "echarts";
import { GETCITYOPTIONS } from "@/http/system";
import {
  GETHOSPITALOPTIONS,
  GETHOSPITALDEALCHART,
  GETARRIVALRATEABNORMALSEARCH,
  GETAPPOINTMENTCHART,
  GETCONVERSIONCHART,
  GETOUTPUTVALUECHART,
  GETCUSTOMERCOMPLAINTSEARCH,
  GETMAINDEMANDSRATEABNORMALSEARCH,
  GETARRIVALOUTPUTVALUEABNORMALSEARCH,
} from "@/http/hospital";
import { deepClone } from "@/common/util";
import { ECHARTCOLOR, DEALPROJECTLIST } from "@/common/constants";
import moment from "moment";
export default {
  data() {
    return {
      dealForm: { dealAmountType: 1 },
      cityList: [],
      dealHospitalList: [],
      bookHospitalList: [],
      rateHospitalList: [],
      averageHospitalList: [],
      chartColor: ECHARTCOLOR,
      arriveTime: [],
      bookForm: {},
      rateForm: {},
      averageForm: {},
      complainList: [],
      DEALPROJECTLIST: DEALPROJECTLIST,
      pageSize: 5,
      arrivePageNumber: 1,
      arriveTotal: 0,
      arriveList: [],

      dealList: [],
      dealPageNumber: 1,
      dealTotal: 0,
      dealTime: [],

      outValueList: [],
      outValuePageNumber: 1,
      outValueTotal: 0,
      outValueTime: [],
    };
  },
  mounted() {
    this.getCity();
    this.getHospital();

    this.getHospitalDeal();
    this.getArriveRate();

    this.getAppoint();
    this.getConversionRate();

    this.getAverage();
    this.getComplainList();

    // 获取主诉成交异常
    this.getDealAnomaly();

    // 到店产值异常
    this.getOutValue();
  },
  methods: {
    // 生成图表
    initChart(id, options) {
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      myChart.setOption(options);
    },

    // 生成折线图、柱状图图表
    initDealChart(oParams, id) {
      let option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          right: "16px",
          data: oParams.legend,
        },
        grid: {
          left: "16",
          right: "36",
          bottom: "16",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: oParams.boundaryGap,
            data: oParams.xaxis,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        color: this.chartColor,
        series: oParams.series,
      };
      //this.initChart("dealChart", option);
      this.initChart(id, option);
    },

    // 处理折线图数据
    initChartData(obj, type) {
      if (!obj) {
        return "";
      }
      let options = {};
      let _names = [];
      let _arr = [];
      obj.series.map((k) => {
        let m = []
        let o = {
          type: type || "line",
          smooth: true,
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          barWidth:obj.barWidth
        };
        k.data.map(j => {
          j = j?Number(j.toFixed(0)):j;
          m.push(j)
        })
        o.name = k.name;
        o.data = m;
        _arr.push(o);
        _names.push(k.name);
      });

      options.legend = _names;
      options.series = _arr;
      options.xaxis = obj.xaxis;
      return options;
    },

    // 获取所有城市
    getCity() {
      GETCITYOPTIONS().then((res) => {
        this.cityList = res.data || [];
      });
    },

    // 获取所有医院
    getHospital(code, id) {
      let oParams = {};
      oParams.city = code;
      GETHOSPITALOPTIONS(oParams).then((res) => {
        let _list = res.data || [];
        if (id) {
          this[id] = _list;
        } else {
          this.dealHospitalList = _list;
          this.bookHospitalList = _list;
          this.rateHospitalList = _list;
          this.averageHospitalList = _list;
        }
      });
    },

    // 获取医院成交情况
    getHospitalDeal() {
      let _this = this;
      let oParams = deepClone(this.dealForm);
      GETHOSPITALDEALCHART(oParams).then((res) => {
        let obj = res.data;
        let options = _this.initChartData(obj);
        _this.initDealChart(options, "hospitalDealChart");
      });
    },

    // 获取到店率异常
    getArriveRate(current) {
      let oParams = {};
      let m = this.arriveTime;
      oParams.pageNumber = current || 1;
      oParams.pageSize = this.pageSize;
      if (m && m.length > 0) {
        oParams.sDate = m[0];
        oParams.eDate = m[1];
      }

      GETARRIVALRATEABNORMALSEARCH(oParams).then((res) => {
        let obj = res.data || {};
        this.arriveList = obj.list || [];
        this.arriveTotal = obj.totalElements;
      });
    },

    // 获取医院预约情况
    getAppoint() {
      let _this = this;
      let oParams = deepClone(this.bookForm);
      GETAPPOINTMENTCHART(oParams).then((res) => {
        let obj = res.data;
        let options = _this.initChartData(obj);
        _this.initDealChart(options, "hospitalBookChart");
      });
    },

    // 获取医院转化率情况
    getConversionRate() {
      let _this = this;
      let oParams = deepClone(this.rateForm);
      GETCONVERSIONCHART(oParams).then((res) => {
        let obj = res.data;
        let options = _this.initChartData(obj);
        _this.initDealChart(options, "hospitalRateChart");
      });
    },

    // 获取每个到店客户平均产值
    getAverage() {
      let _this = this;
      let oParams = deepClone(this.averageForm);
      GETOUTPUTVALUECHART(oParams).then((res) => {
        let obj = res.data;
        obj.barWidth = 50;
        let options = _this.initChartData(obj, "bar");
        options.boundaryGap = true;
        _this.initDealChart(options, "hospitalAverageFormChart");
      });
    },

    // 获取投诉列表
    getComplainList(current) {
      let oParams = {};
      oParams.pageNumber = current || 1;
      oParams.pageSize = 4;
      GETCUSTOMERCOMPLAINTSEARCH(oParams).then((res) => {
        let obj = res.data || {};
        this.complainList = obj.list || [];
      });
    },

    // 监听医院成交情况-医院改变
    changeDealHospital(e, id) {
      if (this.dealForm.hospital) {
        delete this.dealForm.hospital;
      }
      this.getHospital(e, id);
      this.getHospitalDeal();
    },

    // 监听医院预约情况-医院改变
    changeBookHospital(e, id) {
      if (this.bookForm.hospital) {
        delete this.bookForm.hospital;
      }
      this.getHospital(e, id);
      this.getAppoint();
    },

    // 监听医院转化率情况-医院改变
    changeRateHospital(e, id) {
      if (this.rateForm.hospital) {
        delete this.rateForm.hospital;
      }
      this.getHospital(e, id);
      this.getConversionRate();
    },

    // 监听医院转化率情况-医院改变
    changeAverageHospital(e, id) {
      if (this.averageForm.hospital) {
        delete this.averageForm.hospital;
      }
      this.getHospital(e, id);
      this.getAverage();
    },

    // 获取主诉成交异常
    getDealAnomaly(current) {
      let oParams = {};
      let m = this.dealTime;
      oParams.pageNumber = current || 1;
      oParams.pageSize = this.pageSize;
      if (m && m.length > 0) {
        oParams.sDate = m[0];
        oParams.eDate = m[1];
      }
      GETMAINDEMANDSRATEABNORMALSEARCH(oParams).then((res) => {
        let obj = res.data || {};
        this.dealList = obj.list || [];
        this.dealTotal = obj.totalElements;
      });
    },

    // 获取到店产值异常
    getOutValue(current) {
      let oParams = {};
      let m = this.outValueTime;
      oParams.pageNumber = current || 1;
      oParams.pageSize = this.pageSize;
      if (m && m.length > 0) {
        oParams.sDate = m[0];
        oParams.eDate = m[1];
      }
      GETARRIVALOUTPUTVALUEABNORMALSEARCH(oParams).then((res) => {
        let obj = res.data || {};
        this.outValueList = obj.list || [];
        this.outValueTotal = obj.totalElements;
      });
    },

    // 查看投诉详情
    lookDetail() {
      this.$router.push({ name: "system.visitRecord" });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/style/hospital.scss";
</style>